<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哈学院移动用户菜单</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- 引入 Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f4f6f9;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }

        .navbar {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .menu-container {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            padding: 50px 0;
        }

        .menu-item {
            width: 250px;
            margin: 20px;
            text-align: center;
        }

        .menu-item a {
            display: block;
            padding: 30px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            color: #333;
            transition: all 0.3s ease;
        }

        .menu-item a:hover {
            background-color: #e9ecef;
            transform: translateY(-5px);
        }

        .menu-item i {
            font-size: 36px;
            margin-bottom: 15px;
            color: #007bff;
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">哈学院移动大厅</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="main.jsp">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主菜单容器 -->
<div class="container menu-container">
    <div class="menu-item">
        <a href="taocanquery.jsp">
            <i class="fa-solid fa-file-invoice-dollar"></i><br>
            本月账单查询
        </a>
    </div>
    <div class="menu-item">
        <a href="yuliangquery.jsp">
            <i class="fa-solid fa-percentage"></i><br>
            套餐余量查询
        </a>
    </div>
    <div class="menu-item">
        <a href="#">
            <i class="fa-solid fa-print"></i><br>
            打印消费详单
        </a>
    </div>
    <div class="menu-item">
        <a href="#">
            <i class="fa-solid fa-sync"></i><br>
            套餐变更
        </a>
    </div>
    <div class="menu-item">
        <a href="#">
            <i class="fa-solid fa-power-off"></i><br>
            办理退网
        </a>
    </div>
</div>

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>